<template>
  <div id="app" class="app-container">
    <!-- header -->
    <div class="view-container">
      <transition>
        <router-view></router-view>
      </transition>

    </div>
    <!-- tabbar -->
    <div class="tabbar" v-show="loginflag">
      <ul class="tabbar-box">
        <router-link to="/home" tag="li">
          <div class="icon-bg">
            <i class="iconfont iconcanju"></i>
          </div>
          <p>首页</p>
        </router-link>
        <router-link to="/cart" tag="li">
          <div class="icon-bg">
            <i class="iconfont iconmenu"></i>
          </div>
          <p>菜单</p>
        </router-link>
        <router-link to="/search" tag="li">
          <div class="icon-bg">
            <i class="iconfont iconsousuo1"></i>
          </div>
          <p>搜索</p>
        </router-link>
        <router-link to="/hot" tag="li">
          <div class="icon-bg">
            <i class="iconfont icontuijian"></i>
          </div>
          <p>推荐</p>
        </router-link>
        <router-link to="/user" tag="li">
          <div class="icon-bg">
            <i class="iconfont iconuser"></i>
          </div>
          <p>我的</p>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
// 按需导入 Toast 组件
export default{
  data(){
    return{
      flag:false,
      loginflag:true
    }
  },
  methods:{
   
  },
  watch:{
    "$route.path":function(newVal){
      if(newVal === "/login" || newVal === "/reg" ){
        this.loginflag=false
      }else{
        this.loginflag=true
      }
    }
  }
}
</script>

<style scoped>
  .app-container {
    overflow-x: hidden
  }

  .view-container {
    padding-bottom: 54px;
  }

  .v-enter {
    opacity: 0;
    transform: translateY(20%)
  }

  .v-leave-to {
    opacity: 0;
    transform: translateX(-20%);
    position: absolute;
  }

  .v-enter-active,
  .v-leave-active {
    transition: .5s
  }

</style>
